/** 
  校外导师审核实习总结
*/
<template>
  <div class="operate-intern-summary-container">
    <div style="height: 30px;">
      <el-breadcrumb style="float: left;" separator="/">
        <el-breadcrumb-item :to="{ path: '/internSummary' }">
        <span @click="reback()">{{ $t('internSummary.internSummary') }}</span></el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('graduateBase.audit') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button style="float:right; padding:0;" type="text" @click="reback()">{{ $t('common.btn.back') }}</el-button>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="title">{{ $t('internSummary.internCompletion') }}</div>
      <el-divider></el-divider>
      <div class="sub-container">
        <div class="sub-container-title">{{ $t('internSummary.basicInfo') }}</div>
        <table class="table-style-baseinfos">
          <tbody>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.basicName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.name }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.studentId') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.studentId }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.collegeAcademy') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.collegeAcademyStr }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.major') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.majorStr }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.trainingLevel') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.trainingLevelStr }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.trainingCategory') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.trainingCategoryStr }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.degreeType') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.degreeTypeStr }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.formLearning') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.formLearningStr }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.currentGrade') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.currentGrade }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.teacherName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.teacherName }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.majorName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.majorName }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.majorField') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.majorField }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.outsideAdvisorName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.outsideAdvisorName }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.submitFrequency') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.submitFrequency }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.internBaseName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.baseName }}</td>
              <td class="text-right-background-color">{{ $t('internSummary.positionName') }}:</td>
              <td class="text-left-background-none">{{ dataListProp.positionName }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('internSummary.practiceContent') }}:</td>
              <td class="text-left-background-none" colspan="3">{{ dataListProp.practiceContent }}</td>
            </tr>
          </tbody>
        </table>
        <div class="sub-container-title" style="margin-top: 30px;">
          <span>{{ $t('internSummary.professionPracticePlan') }}</span>
          <!-- 收起 -->
          <span class="collapse-info" v-if="collapse" @click="collapse = !collapse">
            <i class="el-icon-arrow-up"></i><span style="margin-left: 10px;">{{ $t('graduateBase.collapse') }}</span>
          </span>
          <!-- 展开 -->
          <span class="collapse-info" v-else @click="collapse = !collapse">
            <i class="el-icon-arrow-down"></i><span style="margin-left: 10px;">{{ $t('graduateBase.unfold') }}</span>
          </span>
        </div>
        <div class="profession-practice-table" v-show="!collapse">
          <table class="table-style-baseinfo">
            <thead>
              <tr>
                <th class="text-center-background-color">{{ $t('internSummary.reportMonth') }}</th>
                <th class="text-center-background-color">{{ $t('internSummary.content') }}</th>
                <th class="text-center-background-color">{{ $t('internSummary.enclosureFile') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in dataListProp.situationList" :key="index">
                <td class="text-center-background">{{ item.reportMonth }}</td>
                <td style="width: 70%;" class="text-center-background">{{ item.content }}</td>
                <td class="text-center-background">
                  <el-button type="text" @click="downLoadEnclosureFile(item.enclosureFileUrl)">{{ item.enclosureFileName }}</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="sub-container-title">{{ $t('internSummary.practiceSummary') }}</div>
        <table class="table-style-baseinfos">
          <tbody>
            <tr>
              <td class="text-right-background-color table-td-row-one">{{ $t('internSummary.summaryContent') }}:</td>
              <td class="text-left-background-none table-td-row-three">{{ dataListProp.summaryContent }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color table-td-row-one">{{ $t('internSummary.enclosureFile') }}:</td>
              <td class="text-left-background-none table-td-row-three">
                <div v-for="(item, index) in dataListProp.enclosureFileNameList" :key="index">
                  <el-button type="text" @click="downLoadEnclosureFile(dataListProp.enclosureFileUrlList[index])">{{ item }}</el-button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
    <el-card shadow="never" body-style="padding: 24px;">
      <div class="sub-container-title">{{ $t('graduateBase.audit') }}</div>
      <el-form class="upload-form" ref="auditForm" :model="auditForm" label-width="80px">
        <el-form-item prop="score" :label="$t('baseAssess.assessScore')+ ':'" :rules="scoreRulesForm.score">
          <el-input v-model="auditForm.score" clearable disabled style="width: 200px;"></el-input>
          <el-button type="primary" :disabled="internSummaryData.score || auditForm.score" @click="entryScore">{{ $t('baseAssess.entry') }}</el-button>
        </el-form-item>
        <el-form-item prop="comment" :label="$t('internSummary.internReview') + ':'" :rules="scoreRulesForm.comment">
          <el-input type="textarea" :maxlength="1000" :rows="5" v-model="auditForm.comment" clearable style="width: 100%;"></el-input>
        </el-form-item>
      </el-form>
      <div class="operate-footer">
        <el-button @click="cancel()">{{ $t('common.btn.cancel') }}</el-button>
        <el-button type="danger" @click="turnDown()">{{$t('graduateBase.turnDown')}}</el-button>
        <el-button type="primary" @click="pass()">{{$t('graduateBase.pass')}}</el-button>
      </div>
    </el-card>
    <el-card shadow="never" body-style="padding: 24px;">
      <div class="sub-container-title" style="margin-top: 30px;">
        <span>{{ $t('internSummary.auditProgress') }}</span>
        <!-- 收起 -->
        <span class="collapse-info" v-if="collapseAuditPro" @click="collapseAuditPro = !collapseAuditPro">
          <i class="el-icon-arrow-up"></i><span style="margin-left: 10px;">{{ $t('graduateBase.collapse') }}</span>
        </span>
        <!-- 展开 -->
        <span class="collapse-info" v-else @click="collapseAuditPro = !collapseAuditPro">
          <i class="el-icon-arrow-down"></i><span style="margin-left: 10px;">{{ $t('graduateBase.unfold') }}</span>
        </span>
      </div>
      <edu-table v-show="!collapseAuditPro" :pagination="false" :tooltipEffect="tooltipEffect" :selection="false" stripe :data="approvalProgressData" size="mini">
        <edu-table-column :label="$t('internSummary.time')" prop="time"></edu-table-column>
        <edu-table-column :label="$t('internSummary.approvorName')" prop="approvorName"></edu-table-column>
        <edu-table-column :label="$t('internSummary.faculty')" prop="faculty"></edu-table-column>
        <edu-table-column :label="$t('internSummary.result')" prop="result">
          <template slot-scope="scope">
            {{ scope.row.result | result}}
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('internSummary.setpId')" prop="setpId">
          <template slot-scope="scope">
            {{ scope.row.setpId | setpId}}
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('internSummary.explanation')" prop="content"></edu-table-column>
      </edu-table>
    </el-card>
    <cancel-info 
      :parentInnerVisible="parentInnerVisible"
      :showSaveAndClose="false"
      @confirm-close="confirmClose" 
      @cancel-to-close="cancelToClose">
    </cancel-info>
    <!-- 评分-考核成绩录入表开始 -->
    <el-dialog
      @close="closeScoreTable"
      :title="$t('baseAssess.entry')"
      width="70%"
      append-to-body
      :visible.sync="internScoreVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <entry-intern-score-table 
        :dataListProp="internScoreInfo"
        :gradeId="internSummaryData.id"
        @confirm-to-close-score-table="closeScoreTable"
        @record-experts-score="recordExpertsScore">
      </entry-intern-score-table>
    </el-dialog>
    <!-- 评分-考核成绩录入表结束 -->
  </div>
</template>
<script>
import { downloadfile } from "common/src/api/upload"
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent'
import cancelInfo from '../common/cancelInfo'
import entryInternScoreTable from './entryInternScoreTable'

export default {
  components: {
    'cancel-info': cancelInfo,
    'entry-intern-score-table': entryInternScoreTable
  },
  data() {
    return {
      dataListProp: {},
      collapse: false,
      collapseAuditPro: false,
      parentInnerVisible: false,
      userInfo: {},
      auditForm: {
        score: 0,
        comment: ''
      },
      scoreRulesForm: {
        score: [
          { required: true, message: this.$t('internSummary.requireScore'), trigger: 'blur' }
        ],
        comment: [
          { validator: this.checkSpecial, trigger: 'blur'}
        ]
      },
      internScoreVisible: false,
      internScoreInfo: {},
      approvalProgressData: []
    };
  },
  props: {
    internSummaryData: {
      type: Object,
      default: () => {}
    },
    operateMode: {
      type: String,
      default: 'add'
    }
  },
  filters: {
    result(val) {
      switch(val) {
        case 'COMMIT':
          return '提交'
        case 'Process':
          return '通过'
        case 'Reject':
          return '已驳回'
        case 'End':
          return '已结束'
      }
    },
    setpId(val) {
      switch(val) {
        case 0:
          return '提交'
        case 1:
          return '校外导师审核'
        case 2:
          return '导师审核'
      }
    }
  },
  async created() {
    // 获取当前用户auths权限
    let sessiondata = JSON.parse(localStorage.getItem("sessiondata"));
    if (sessiondata) {
      if (sessiondata.mockUser || sessiondata.user) {
        this.userInfo = sessiondata.mockUser || sessiondata.user;
      }
    }
    
  },
  methods: {
    // 校验特殊字符$
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im
      if (regEn.test(value)) {
        callback(new Error(this.$t('graduateBase.specialText')))
      } else {
        callback()
      }
    },
    reback() {
      this.$emit('change-intern-summary-index')
    },
    downLoadEnclosureFile(url) {
      downloadfile(url)
    },
    // 取消
    cancel() {
      let allIsEmpty = true
      if (this.auditForm.comment) {
        allIsEmpty = false
      }
      if (allIsEmpty) {
        this.reback()
      } else {
        this.parentInnerVisible = true
      }
    },
    // 驳回
    turnDown() {
      this.$refs['auditForm'].validate((valid) => {
        if (valid) {
          if (!this.auditForm.comment) {
            this.$eduAlert(this.$t('internSummary.requireAuditComment'), this.$t('graduateBase.prompt'), {
              type: 'warning'
            })
            return
          }
          graduateStudentApi.outSchoolTutorAudit({
            "id": this.dataListProp.id,
            "status": "4",
            "comment": this.auditForm.comment,
            "agreeDTOList": [
              {
                "content": this.auditForm.comment,
                "no": this.dataListProp.actNo
              }
            ]
          }).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('graduateBase.auditSuccessfully'))
              this.reback()
            }
          })
        }
      });
    },
    // 通过
    async pass() {
      this.$refs['auditForm'].validate((valid) => {
        if (valid) {
         graduateStudentApi.outSchoolTutorAudit({
            "id": this.dataListProp.id,
            "comment": this.auditForm.comment,
            "agreeDTOList": [
              {
                "content": this.auditForm.comment,
                "no": this.dataListProp.actNo
              }
            ]
          }).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('graduateBase.auditSuccessfully'))
              this.reback()
            }
          })
        }
      })
    },
    // 确认关闭提示框
    confirmClose() {
      this.parentInnerVisible = false
      this.reback()
    },
    // 取消关闭
    cancelToClose() {
      this.parentInnerVisible = false
    },
    // 录入考核成绩
    entryScore() {
      graduateStudentApi.getHasDetailTemp({
        "itemCategory": "2",
        "remarkTemplate": {
          "id": this.dataListProp.id,
          "trainingLevel": this.dataListProp.trainingLevel,
          "trainingType": this.dataListProp.trainingCategory,
          "degreeType": this.dataListProp.degreeType,
          "learnForm": this.dataListProp.formLearning,
          "collegeAcademy": this.dataListProp.collegeAcademy,
          "major": this.dataListProp.major
        }
      }).then(res => {
        if (res.code === 200) {
          this.internScoreInfo = res.data;
        }
      });
      this.internScoreVisible = true;
    },
    // 关闭成绩录入表
    closeScoreTable() {
      this.internScoreInfo = {};
      this.internScoreVisible = false;
    },
    // 最终记录考核成绩
    recordExpertsScore(val) {
      this.internScoreVisible = false;
      this.auditForm.score = val;
      if (this.auditForm.score) {
        this.$refs['auditForm'].clearValidate()
      }
    },
    // 获取审核进度
    getApprovalProgress() {
      graduateStudentApi.getPracticeGetActDetail(this.dataListProp.actNo).then(res => {
        if (res.code === 200) {
          this.approvalProgressData = res.data;
        }
      })
    }
  },
  watch: {
    internSummaryData: {
      handler(newVal) {
        if (newVal) {
          this.dataListProp = JSON.parse(JSON.stringify(newVal))
          this.dataListProp['enclosureFileNameList'] = this.dataListProp.enclosureFileName.split(',')
          this.dataListProp['enclosureFileUrlList'] = this.dataListProp.enclosureFileUrl.split(',')
          this.auditForm.score = this.dataListProp.score
          this.getApprovalProgress();
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .operate-intern-summary-container {
    .el-breadcrumb__item:last-child ::v-deep {
      .el-breadcrumb__inner {
        color: #606266;
        font-weight: bold;
        cursor: default
      }
    }
    .el-breadcrumb__item ::v-deep {
      .is-link {
        color: #aaa;
        font-weight: unset;
      }
      .is-link:hover {
        color: #409eff;
      }
    }
    .title {
      margin-bottom: 40px;
      font-size: 18px;
    }
    .sub-container {
      color: #2a394e;
      padding: 0 20px;
      font-size: 16px;
    }
    .sub-container-title {
      margin-bottom: 20px;
      font-size: 16px;
      .collapse-info {
        margin-left: 55px;
        color: #3a7fe8;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .table-style-baseinfos {
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      box-sizing: border-box;
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      border-radius: 0px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
      td {
        width: 25%;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-weight: 401;
        font-style: normal;
        font-size: 14px;
        color: #2b3b4e;
        height: 32px;
        padding: 0 10px;
      }
      .text-right-background-color {
        background-color: #fdfeff4d;
        text-align: right;
      }
      .text-left-background-none {
        text-align: left;
      }
      .table-td-row-one {
        width: 25%;
      }
      .table-td-row-three {
        width: 75%;
      }
    }
    .table-style-baseinfo {
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      box-sizing: border-box;
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      border-radius: 0px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
      .text-right-background-color {
        background-color: #fdfeff4d;
        text-align: right;
      }
      td {
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-weight: 401;
        font-style: normal;
        font-size: 14px;
        color: #2b3b4e;
        height: 32px;
        padding: 0 10px;
      }
    }
    .operate-footer {
      text-align: right;
    }
  }
</style>